<template>
  <div class="product">
    <!-- 远程搜索 -->
    <div class="longSearch">
      <el-select
        v-model="searchValue"
        filterable
        clearable
        remote
        reserve-keyword
        @blur="searchBlur"
        @change="searchTextChange"
        @clear="clear"
        placeholder="请输入关键词"
        :remote-method="remoteMethod"
        :loading="loading"
      >
        <el-option
          v-for="item in searchList"
          :key="item.sId"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
      <!-- 搜索按钮 -->
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="searchBtn"
      ></el-button>
      <el-button type="primary" plain>添加项目</el-button>
    </div>
    <!-- 班级选择-->
    <div class="allowSearch">
      <span>选择班级：</span>
      <el-select
        v-model="classes"
        filterable
        placeholder="请选择"
        @visible-change="classVisible"
        @change="classChange"
      >
        <el-option label="全部" value="all"></el-option>
        <el-option
          v-for="(item, index) in classOptions"
          :key="index"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 表格 -->
    <div class="stu-table">
      <el-table :data="stuData" v-loading="loading" border style="width: 100%">
        <el-table-column
          prop="headimgurl"
          align="center"
          label="头像"
          width="80"
        >
          <template slot-scope="scope">
            <el-avatar
              shape="square"
              :size="50"
              fit="fill"
              :src="scope.row.headimgurl"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="class" align="center" label="班级">
        </el-table-column>
        <el-table-column prop="productUrl" align="center" label="项目">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              class="btn"
              icon="el-icon-view"
              @click="$router.push({ path: '/StudentManager/studentProfile' })"
              >查看</el-button
            >
            <el-button
              type="primary"
              class="btn"
              icon="el-icon-edit"
              @click="editStu(row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              class="btn"
              icon="el-icon-delete"
              @click="deleteStu(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
import { getStuList, searchStu } from '@/api'

export default {
  data() {
    return {
      // 班级搜索
      classOptions: [],
      // 远程搜索
      searchValue: '',
      blurSearchValue: '',
      searchList: [], //展示下搜索拉菜单的数据
      value: [],
      list: [],
      loading: true,
      states: [],
      // 存储后台表格数据
      stuData: [],
      classes: [],
    }
  },
  created() {
    this.updateStuTable()
  },
  mounted() {},
  methods: {
    // **班级选择
    // 班级选择框展开/收起触发的事件
    classVisible(isVisible) {
      // 展开的时候需要获取数据
      // 调用获取列表的方法
      if (isVisible) {
        getStuList().then((res) => {
          console.log(res)
          // 需要去重操作
          let norepeate = []
          res.data.data.forEach((item) => {
            norepeate.push(item.class)
          })
          norepeate = Array.from(new Set(norepeate))
          this.classOptions = norepeate
          console.log(norepeate)
        })
      } else {
      }
      console.log()
    },
    // 选择班级
    classChange(query) {
      // 如果query为all代表要显示所以的数据，后台的设定是，class字符串为空时返回所以的数据
      let classes = query === 'all' ? '' : query
      this.updateStuTable({ page: 1, count: 10, classes })
    },
    // **远程搜索点击按钮搜索
    searchBtn() {
      // 点击搜索按钮
      // this.updateStuTable(this.blurSearchValue)
      this.searchTextChange()
    },
    // **远程搜索框
    searchBlur() {
      // 输入框失去焦点时输入框里面的值消失，
      // 将储存好的输入框的值 设置给select组件
      this.searchValue = this.blurSearchValue
    },
    clear(e) {
      // 请空输入框中的值时表格全部数据重新渲染
      this.updateStuTable()
    },
    searchTextChange(searchText) {
      this.stuData = this.searchList
    },
    remoteMethod(query) {
      // query输入框了输入的值
      this.blurSearchValue = query
      // 键盘弹起时获取输入的值，赋值三方变量进行输入存储
      let key = query
      let page = 1
      let count = ''
      searchStu(page, count, key).then((res) => {
        console.log(res)
        this.searchList = res.data.data
      })
    },
    // 更新表格所有数据
    updateStuTable(params = { page: 1, count: 10, classes: '' }) {
      this.loading = true
      getStuList(params).then((res) => {
        // 获取数据成功
        this.stuData = res.data.data
        this.loading = false
      })
    },
  },
}
</script>
<style>
.icon {
  font-size: 50px;
  cursor: pointer;
}
</style>
